<template>
    <div class="containerBox">
        <div class="topInfoBox flex_layout u_f14">
            <div class="consInfo">
                <p class="u_f18 u_fb">姓名</p>
                <div class="flex_layout u-color-666 u_mt_15">
                    <div class="u_mr_20">性别：女</div>
                    <div class="u_mr_20">ID：1234</div>
                    <div class="u_mr_20">手机号码：13311442244</div>
                </div>
            </div>
            <div class="u_ml_50">
                <p>个案总案</p>
                <p class="u_mt_10 u_f22 u_fb">1</p>
            </div>
            <div class="u_ml_50">
                <p>进行中</p>
                <p class="u_mt_10 u_f22 u_fb">1</p>
            </div>
            <div class="u_ml_50">
                <p>结案</p>
                <p class="u_mt_10 u_f22 u_fb">0</p>
            </div>
            <div class="u_ml_50">
                <p>转介</p>
                <p class="u_mt_10 u_f22 u_fb">0</p>
            </div>
            <div class="u_ml_50">
                <p>脱落</p>
                <p class="u_mt_10 u_f22 u_fb">0</p>
            </div>
            <div class="u_ml_50">
                <p>未咨询</p>
                <p class="u_mt_10 u_f22 u_fb">0</p>
            </div>
            
        </div>

        <div class="serchBox clearfix">
            <el-button class="u_mb_10" type="primary" @click="addUser()">添加自带来访</el-button>
            <easyForm :fieldList="fieldList" :model="model" :options="options" @submit="search" @reset="reset">
            </easyForm>
        </div>
        <div class="">
            <el-table :data="tableData" border :header-cell-style="{background:'#eef1f6',color:'#606266'}" >
                <el-table-column
                    align="center"
                    :prop="item.name"
                    :label="item.label"
                    v-for="(item, index) in tableHeader"
                    :key="index"
                    :fixed="item.fixed"
                    :width="item.width"
                    :type="item.type"
                    :min-width="item.minWidth"
                >
                </el-table-column>
                <el-table-column label="操作" width="200" fixed="right" align="center">
                    <template #default="scope">
                        <el-button size="small" link type="primary" @click="details(scope.$index, scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page_box">
                <v-pagination :pagesize="query.limit"
                    :total="pageTotal"
                    :options="query"
                    :render="getData">
	            </v-pagination>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>

import { ref , reactive} from 'vue'
import type { FormInstance } from 'element-plus'
import easyForm from '@/components/formItem/index.vue'
import { useRouter } from 'vue-router';
import {useStore} from "vuex";

const store = useStore();
const router = useRouter();

const formList = {
    base: [
        { placeholder: '来访者姓名/手机号', field: 'name',  },
        { placeholder: '是否特殊案例', field: 'type', type:"select",
            options: { data: [{ label: '是', value: 1 }, 
            { label: '否', value: 2 }] } },
        { placeholder: '是否自带', field: 'style', type:"select",
            options: { data: [{ label: '是', value: 1 },
            { label: '否', value: 2 }, ] } },
        { placeholder: '咨询状态', field: 'from', type:"select",
            options: { data: [{ label: '进行中', value: 1 }, 
            { label: '结案', value: 2 }, 
            { label: '脱落', value: 3 }, 
            { label: '转介', value: 4 }, 
            { label: '未咨询', value: 5 }] } },

    ],
}
const fieldList: Form.FieldItem[] = formList.base;

const options = {
    labelPosition: 'right',
    disabled: false,
    submitButtonText: '查询',
    resetButtonText: '重置',
    downloadButtonText: '导出',
    showResetButton: true,
    showDownloadButton: true,
    showSubmitButton:true,
};
// 搜索参数配置 使用form组件
const model = ref<Record<string, any>>({
        inlineFlag: true,
        size:'small',
        count: '',
        content: '',
        date:''
    })

    // 表格内容
let tableLayout = ref('fixed')
let tableHeader = [
    {
        type: 'index',
        label:'序号',
        width: 60,
        fixed: 'left'
    },
    {
        label:"用户姓名",
        minWidth: 120,
        name:"name"
    },
    {
        label:"注册手机",
        minWidth: 120,
        name:"name"
    },
    {
        label:"是否特殊案例",
        minWidth: 120,
        name:"name"
    },
    {
        label:"是否自带",
        minWidth: 120,
        name:"name"
    },
    {
        label:"已完成咨询次数（包含未到场）",
        minWidth: 120,
        name:"name"
    },
    {
        label:"待咨询次数",
        minWidth: 120,
        name:"name"
    },
    {
        label:"剩余咨询次数",
        minWidth: 120,
        name:"name"
    },

]
 ;
let tableData = [{
        name: '张三',
        time: '2022-12-01 14:56:28',
        content: '登录系统',
        id:1

      }, {
        name: '李四',
        content: '编辑用户xxx的信息',
        time: '2022-12-12 09:22:32',
        id:2
      }, {
        name: '王五',
        content: '修改咨询订单122222222',
        time: '2022-11-20 11:23:45',
        id:3
      }, ]
// 分页数据
const  pageTotal = ref(6),//总条数
    query = reactive({//配置对应的查询参数
        appTimeStart:'',
        appTimeEnd:'',
        page: 1,
        limit:10,//page第几页,limit是一页几个
    });
const details = (index:number, row: any) => {
    let tagsItem = {
        "component": () => import("@/views/dataMana/userMana.vue"),
            "path": "/userMana",
            "name":"userMana",
            "meta":{
                "icon": "Monitor",
                "name": "新建用户",
                "toId": row.id
            },
    }
    router.push({name: 'userMana',query:{toId:row.id}});
    store.dispatch("ADD_TAG", tagsItem)

}

</script>

<style scoped lang="scss">
.containerBox{
    // width: calc(100% - 20px);
    box-sizing: border-box;
    margin: 10px;
    padding: 10px;
    border-radius: 4px;
    // border: 1px solid #efefef;
    // box-shadow: 0 0 10px #999!important;
    .topInfoBox{
        width: 100%;
        background: #eeeeee;
        border-radius: 4px;
        padding: 20px;
        box-sizing: border-box;
    }
}
</style>